<template>
  <div>
    <el-descriptions
      border
      :column="3"
      :size="'medium'"
      :label-style="label_style"
      :contentStyle="content_style"
    >
      <el-descriptions-item label="工单号" label-class-name="myLabel">
        <span>{{ form.workOrderNumber }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="销售单号" label-class-name="myLabel">
        <span>{{ form.number }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="审核日期" label-class-name="myLabel">
        <span>{{ form.approvedTime }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="状态" label-class-name="myLabel">
        <span>{{ form.status }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="型号" label-class-name="myLabel">
        <span>{{ form.modelNumber }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="工艺要求" label-class-name="myLabel">
        <span v-if="form.technology == 0">冷胶</span>
        <span v-else-if="form.technology == 1">热胶</span>
        <span v-else-if="form.technology == 3">先冷后热</span>
        <span v-else>无工艺</span>
      </el-descriptions-item>
      <!--     contentClassName="operateLabel" operateLabel -->
      <el-descriptions-item label="长度" label-class-name="myLabel ">
        <span>{{ form.length }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="高度" label-class-name="myLabel">
        <span>{{ form.height }}</span>
      </el-descriptions-item>

      <el-descriptions-item label="客户" label-class-name="myLabel">
        <span>{{ form.clientName }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="联系电话" label-class-name="myLabel">
        <span>{{ form.contactNumber }}</span>
      </el-descriptions-item>

      <el-descriptions-item
        label="收货地址"
        label-class-name="myLabel"
        :span="2"
      >
        <span>{{ form.address }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="收货人" label-class-name="myLabel">
        <span>{{ form.contacts }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="发货方式" label-class-name="myLabel">
        <span>{{ form.deliveryMethod }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="付款方式" label-class-name="myLabel">
        <span>
          {{
            form.paymentMethod == 0
              ? "寄付"
              : form.paymentMethod == 1
              ? "到付"
              : "包邮"
          }}</span
        >
      </el-descriptions-item>

      <el-descriptions-item label="面料状态" label-class-name="myLabel">
        <span>{{ isShortageType[form.isShortage] }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="是否加急" label-class-name="myLabel">
        <el-checkbox
          v-model="form.isUrgent"
          label="加急"
          :true-label="'1'"
          :false-label="'0'"
        ></el-checkbox>
      </el-descriptions-item>
      <el-descriptions-item label="批号" label-class-name="myLabel">
        <span>{{ form.batchNumber }}</span>
      </el-descriptions-item>

      <el-descriptions-item label="领料米数" label-class-name="myLabel">
        <span>{{ form.pickingLength }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="机台号" label-class-name="myLabel">
        <span>{{ form.machineNumber }}</span>
      </el-descriptions-item>
      <el-descriptions-item
        label="订单备注"
        label-class-name="myLabel"
        :span="3"
      >
        <span>{{ form.orderRemark }}</span>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import { getTaskOrder } from "@/api/qb";
export default {
  components: {},
  props: {
    multi: {
      type: Number,
      default: 1,
    },
    bgColor: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {
      title: "工单信息",
      form: {},

      isShortageType: {
        0: "正常",
        1: "欠料",
        2: "零裁",
        3: "绣花",
        4: "绣花欠料",
        5: "包板",
        6: "空",
      },
      label_style: {
        "text-align": "center", //文本居中
        "font-weight": "600",
        width: "140px",
        "word-break": "keep-all",
        padding: "6px",
      },
      content_style: {
        "min-width": "200px",
        "word-break": "break-all", //过长时自动换行
        "font-size": "15px",
      },
    };
  },
  created() {},
  mounted() {},
  methods: {
    // 加载列表
    getList(val) {
      this.form = {};
      getTaskOrder(val).then((res) => {
        this.form = res.data;
        this.loading = false;
      });
    },
    rowIndex({ row, rowIndex }) {
      row.row_index = rowIndex;
      if (this.bgColor == row.batchNumber) {
        return "success-row";
      }
    },
    rowClick(row) {
      this.radio = row.row_index;
      this.getCurrentRow(row);
    },
  },
};
</script>
<style lang="scss" scoped>
.current-row {
  background: blue;
}
::v-deep .myLabel {
  font-weight: bold;
  font-size: 14px;
  color: #515a6e;
}
::v-deep .operateLabel {
  background: #faecd8;
  //e1f3d8 faecd8 79bbff
}
</style>
